<<template>
<div class="top">
      <el-form :model="newtask" ref="taskform" :rules="rules" label-width="200px">
          <el-form-item label='名称' prop="taskname">
            <el-input v-model='newtask.taskname' class="input"></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="5">
              <el-form-item label='模块' prop="taskModule" v-model="newtask.taskModule">
                <el-select v-model='newtask.taskModule' placeholder="请选择" class="input" @change="changeValue" @visible-change="taskModuleQuery">
                  <el-option v-for="(item,index) in taskmodules" :key="item.taskmodule" :label="item.taskmodule" :value="item.taskmoduleId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label='job名称' prop="taskAction">
                <el-input v-model='newtask.taskAction' class="input"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label='作业参数' prop="taskParam">
            <el-input type="textarea" v-model='newtask.taskParam' class="textarea"></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="5">
                <el-form-item label='作业执行时间表达式' prop="taskExpression">
                    <el-input v-model='taskExpression' class="input" readonly="readonly" v-bind:value="taskExpression"></el-input>
                </el-form-item>
            </el-col>
          <el-col :span="5">
              <el-form-item>
            <el-button type='primary' @click="makeTimeExpression">生成时间表达式</el-button>
        </el-form-item>
        </el-col>
        </el-row>
          <el-form-item label='备注' prop="taskRemark">
            <el-input type="textarea" v-model='newtask.taskRemark' class="textarea"></el-input>
          </el-form-item>
         
        <el-form-item>
            <el-button type='primary' @click="addTaskSubmit">确定</el-button>
            <el-button type='primary' @click='cancel'>取消</el-button>
        </el-form-item>
        
        </el-form> 
        <el-dialog title='生成时间表达式' :visible.sync='makeTimeExpressionOpend'>
            <div>
            <el-tabs type="border-card">
                <el-tab-pane label="秒">
                    <div title="秒">
                        <div class="line">
                            <input type="radio" checked="checked" name="second" value="*" v-model="second">
                            每秒 允许的通配符[, - * /]</div>
                        <div class="line" v-model="second" id="cycleSec">
                            <input ref="input"  type="radio" name="second" v-model="second" v-bind:value="second1+'-'+second2">
                            周期从
                            <el-input-number class="num" v-model="second1"  :value="1" :min="1" :max="60" size="small" :step="1" 
                            id="secondStart_0" ref="secStart"></el-input-number>
                            -
                            <el-input-number class="num" v-model="second2" :value="2" :min="2" :max="60" size="small" :step="1" 
                            id="secondEnd_0" ref="secEnd"></el-input-number>
                            秒</div>
                        <div class="line">
                            <input type="radio" name="second" v-model="second" v-bind:value="second3+'/'+second4" >
                            从
                            <el-input-number class="num" v-model="second3" :value="1" :min="1" :max="60" size="small" :step="1" 
                            id="secondStart_1" ref="secStart1"></el-input-number>
                            秒开始,每
                            <el-input-number class="num" v-model="second4" :value="2" :min="1" :max="60" size="small" :step="1" 
                            id="secondEnd_1" ref="secEnd1"></el-input-number>
                            秒执行一次</div>
                        <div class="line">
                            <input type="radio" name="second" id="sencond_appoint" v-model="second" v-bind:value="secondList+','">
                            指定</div>
                        <div class="imp secondList" name="secondList" >
                            <input type="checkbox" value="0" v-model="secondList">00
                            <input type="checkbox" value="1" v-model="secondList">01
                            <input type="checkbox" value="2" v-model="secondList">02
                            <input type="checkbox" value="3" v-model="secondList">03
                            <input type="checkbox" value="4" v-model="secondList">04
                            <input type="checkbox" value="5" v-model="secondList">05
                            <input type="checkbox" value="6" v-model="secondList">06
                            <input type="checkbox" value="7" v-model="secondList">07
                            <input type="checkbox" value="8" v-model="secondList">08
                            <input type="checkbox" value="9" v-model="secondList">09
                        </div>
                        <div class="imp secondList">
                            <input type="checkbox" value="10" v-model="secondList">10
                            <input type="checkbox" value="11" v-model="secondList">11
                            <input type="checkbox" value="12" v-model="secondList">12
                            <input type="checkbox" value="13" v-model="secondList">13
                            <input type="checkbox" value="14" v-model="secondList">14
                            <input type="checkbox" value="15" v-model="secondList">15
                            <input type="checkbox" value="16" v-model="secondList">16
                            <input type="checkbox" value="17" v-model="secondList">17
                            <input type="checkbox" value="18" v-model="secondList">18
                            <input type="checkbox" value="19" v-model="secondList">19
                        </div>
                        <div class="imp secondList">
                            <input type="checkbox" value="20" v-model="secondList">20
                            <input type="checkbox" value="21" v-model="secondList">21
                            <input type="checkbox" value="22" v-model="secondList">22
                            <input type="checkbox" value="23" v-model="secondList">23
                            <input type="checkbox" value="24" v-model="secondList">24
                            <input type="checkbox" value="25" v-model="secondList">25
                            <input type="checkbox" value="26" v-model="secondList">26
                            <input type="checkbox" value="27" v-model="secondList">27
                            <input type="checkbox" value="28" v-model="secondList">28
                            <input type="checkbox" value="29" v-model="secondList">29
                        </div>
                        <div class="imp secondList">
                            <input type="checkbox" value="30" v-model="secondList">30
                            <input type="checkbox" value="31" v-model="secondList">31
                            <input type="checkbox" value="32" v-model="secondList">32
                            <input type="checkbox" value="33" v-model="secondList">33
                            <input type="checkbox" value="34" v-model="secondList">34
                            <input type="checkbox" value="35" v-model="secondList">35
                            <input type="checkbox" value="36" v-model="secondList">36
                            <input type="checkbox" value="37" v-model="secondList">37
                            <input type="checkbox" value="38" v-model="secondList">38
                            <input type="checkbox" value="39" v-model="secondList">39
                        </div>
                        <div class="imp secondList">
                            <input type="checkbox" value="40" v-model="secondList">40
                            <input type="checkbox" value="41" v-model="secondList">41
                            <input type="checkbox" value="42" v-model="secondList">42
                            <input type="checkbox" value="43" v-model="secondList">43
                            <input type="checkbox" value="44" v-model="secondList">44
                            <input type="checkbox" value="45" v-model="secondList">45
                            <input type="checkbox" value="46" v-model="secondList">46
                            <input type="checkbox" value="47" v-model="secondList">47
                            <input type="checkbox" value="48" v-model="secondList">48
                            <input type="checkbox" value="49" v-model="secondList">49
                        </div>
                        <div class="imp secondList">
                            <input type="checkbox" value="50" v-model="secondList">50
                            <input type="checkbox" value="51" v-model="secondList">51
                            <input type="checkbox" value="52" v-model="secondList">52
                            <input type="checkbox" value="53" v-model="secondList">53
                            <input type="checkbox" value="54" v-model="secondList">54
                            <input type="checkbox" value="55" v-model="secondList">55
                            <input type="checkbox" value="56" v-model="secondList">56
                            <input type="checkbox" value="57" v-model="secondList">57
                            <input type="checkbox" value="58" v-model="secondList">58
                            <input type="checkbox" value="59" v-model="secondList">59
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="分钟">
                    <div title="分钟">
                        <div class="line">
                            <input type="radio" checked="checked" name="min" value="*" v-model="min">
                            分钟 允许的通配符[, - * /]</div>
                        <div class="line">
                            <input type="radio" name="min" v-model="min" v-bind:value="min1+'-'+min2">
                            周期从
                            <el-input-number class="num" v-model="min1" :value="1" :min="1" :max="60" size="small" :step="1" 
                            id="minStart_0" ref="minStart"></el-input-number>
                            -
                            <el-input-number class="num" v-model="min2" :value="2" :min="2" :max="60" size="small" :step="1" 
                            id="minEnd_0" ref="minEnd"></el-input-number>
                            分钟</div>
                        <div class="line">
                            <input type="radio" name="min"v-model="min" v-bind:value="min3+'/'+min4">
                            从
                            <el-input-number class="num" v-model="min3" :value="1" :min="1" :max="60" size="small" :step="1" 
                            id="minStart_1" ref="minStart1"></el-input-number>
                            分钟开始,每
                            <el-input-number class="num" v-model="min4" :value="2" :min="1" :max="60" size="small" :step="1" 
                            id="minEnd_1" ref="minEnd1"></el-input-number>
                            分钟执行一次</div>
                        <div class="line">
                            <input type="radio" name="min" id="min_appoint" v-model="min" v-bind:value="minList+','">
                            指定</div>
                        <div class="imp minList">
                            <input type="checkbox" value="0" v-model="minList">00
                            <input type="checkbox" value="1" v-model="minList">01
                            <input type="checkbox" value="2" v-model="minList">02
                            <input type="checkbox" value="3" v-model="minList">03
                            <input type="checkbox" value="4" v-model="minList">04
                            <input type="checkbox" value="5" v-model="minList">05
                            <input type="checkbox" value="6" v-model="minList">06
                            <input type="checkbox" value="7" v-model="minList">07
                            <input type="checkbox" value="8" v-model="minList">08
                            <input type="checkbox" value="9" v-model="minList">09
                        </div>
                        <div class="imp minList">
                            <input type="checkbox" value="10" v-model="minList">10
                            <input type="checkbox" value="11" v-model="minList">11
                            <input type="checkbox" value="12" v-model="minList">12
                            <input type="checkbox" value="13" v-model="minList">13
                            <input type="checkbox" value="14" v-model="minList">14
                            <input type="checkbox" value="15" v-model="minList">15
                            <input type="checkbox" value="16" v-model="minList">16
                            <input type="checkbox" value="17" v-model="minList">17
                            <input type="checkbox" value="18" v-model="minList">18
                            <input type="checkbox" value="19" v-model="minList">19
                        </div>
                        <div class="imp minList">
                            <input type="checkbox" value="20" v-model="minList">20
                            <input type="checkbox" value="21" v-model="minList">21
                            <input type="checkbox" value="22" v-model="minList">22
                            <input type="checkbox" value="23" v-model="minList">23
                            <input type="checkbox" value="24" v-model="minList">24
                            <input type="checkbox" value="25" v-model="minList">25
                            <input type="checkbox" value="26" v-model="minList">26
                            <input type="checkbox" value="27" v-model="minList">27
                            <input type="checkbox" value="28" v-model="minList">28
                            <input type="checkbox" value="29" v-model="minList">29
                        </div>
                        <div class="imp minList">
                            <input type="checkbox" value="30" v-model="minList">30
                            <input type="checkbox" value="31" v-model="minList">31
                            <input type="checkbox" value="32" v-model="minList">32
                            <input type="checkbox" value="33" v-model="minList">33
                            <input type="checkbox" value="34" v-model="minList">34
                            <input type="checkbox" value="35" v-model="minList">35
                            <input type="checkbox" value="36" v-model="minList">36
                            <input type="checkbox" value="37" v-model="minList">37
                            <input type="checkbox" value="38" v-model="minList">38
                            <input type="checkbox" value="39" v-model="minList">39
                        </div>
                        <div class="imp minList">
                            <input type="checkbox" value="40" v-model="minList">40
                            <input type="checkbox" value="41" v-model="minList">41
                            <input type="checkbox" value="42" v-model="minList">42
                            <input type="checkbox" value="43" v-model="minList">43
                            <input type="checkbox" value="44" v-model="minList">44
                            <input type="checkbox" value="45" v-model="minList">45
                            <input type="checkbox" value="46" v-model="minList">46
                            <input type="checkbox" value="47" v-model="minList">47
                            <input type="checkbox" value="48" v-model="minList">48
                            <input type="checkbox" value="49" v-model="minList">49
                        </div>
                        <div class="imp minList">
                            <input type="checkbox" value="50" v-model="minList">50
                            <input type="checkbox" value="51" v-model="minList">51
                            <input type="checkbox" value="52" v-model="minList">52
                            <input type="checkbox" value="53" v-model="minList">53
                            <input type="checkbox" value="54" v-model="minList">54
                            <input type="checkbox" value="55" v-model="minList">55
                            <input type="checkbox" value="56" v-model="minList">56
                            <input type="checkbox" value="57" v-model="minList">57
                            <input type="checkbox" value="58" v-model="minList">58
                            <input type="checkbox" value="59" v-model="minList">59
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="小时">
                    <div title="小时">
                        <div class="line">
                            <input type="radio" checked="checked" name="hour" value="*" v-model="hour" >
                            小时 允许的通配符[, - * /]</div>
                        <div class="line">
                            <input type="radio" name="hour" v-model="hour" v-bind:value="hour1+'-'+hour2">
                            周期从
                            <el-input-number class="num" v-model="hour1" :value="1" :min="1" :max="60" size="small" :step="1" 
                            id="hourStart_0" ref="hourStart"></el-input-number>
                            -
                            <el-input-number class="num" v-model="hour2" :value="2" :min="2" :max="60" size="small" :step="1" 
                            id="hourEnd_1" ref="hourEnd"></el-input-number>
                            小时</div>
                        <div class="line">
                            <input type="radio" name="hour" v-model="hour" v-bind:value="hour3+'/'+hour4">
                            从
                            <el-input-number class="num" v-model="hour3" :value="1" :min="1" :max="60" size="small" :step="1" 
                            id="hourStart_1" ref="hourStart1"></el-input-number>
                            小时开始,每
                            <el-input-number class="num" v-model="hour4" :value="2" :min="1" :max="60" size="small" :step="1" 
                            id="hourEnd_1" ref="hourEnd1"></el-input-number>
                            小时执行一次</div>
                        <div class="line">
                            <input type="radio" name="hour" id="hour_appoint" v-model="hour" v-bind:value="hourList+','">
                            指定</div>
                        <div class="imp hourList">
                            AM:
                            <input type="checkbox" value="0" v-model="hourList">00
                            <input type="checkbox" value="1" v-model="hourList">01
                            <input type="checkbox" value="2" v-model="hourList">02
                            <input type="checkbox" value="3" v-model="hourList">03
                            <input type="checkbox" value="4" v-model="hourList">04
                            <input type="checkbox" value="5" v-model="hourList">05
                            <input type="checkbox" value="6" v-model="hourList">06
                            <input type="checkbox" value="7" v-model="hourList">07
                            <input type="checkbox" value="8" v-model="hourList">08
                            <input type="checkbox" value="9" v-model="hourList">09
                            <input type="checkbox" value="10" v-model="hourList">10
                            <input type="checkbox" value="11" v-model="hourList">11
                        </div>
                        <div class="imp hourList">
                            PM:
                            <input type="checkbox" value="12" v-model="hourList">12
                            <input type="checkbox" value="13" v-model="hourList">13
                            <input type="checkbox" value="14" v-model="hourList">14
                            <input type="checkbox" value="15" v-model="hourList">15
                            <input type="checkbox" value="16" v-model="hourList">16
                            <input type="checkbox" value="17" v-model="hourList">17
                            <input type="checkbox" value="18" v-model="hourList">18
                            <input type="checkbox" value="19" v-model="hourList">19
                            <input type="checkbox" value="20" v-model="hourList">20
                            <input type="checkbox" value="21" v-model="hourList">21
                            <input type="checkbox" value="22" v-model="hourList">22
                            <input type="checkbox" value="23" v-model="hourList">23
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="日">
                    <div title="日">
                        <div class="line">
                            <input type="radio" checked="checked" name="day" value="*" v-model="day">
                            日 允许的通配符[, - * / L W]</div>
                        <div class="line">
                            <input type="radio" name="day" value="?" v-model="day">
                            不指定</div>
                        <div class="line">
                            <input type="radio" name="day" v-model="day" v-bind:value="day1+'-'+day2">
                            周期从
                            <el-input-number class="num" v-model="day1" :value="1" :min="1" :max="31" size="small" :step="1" 
                            id="dayStart_0" ref="dayStart"></el-input-number>
                            -
                            <el-input-number class="num" v-model="day2" :value="2" :min="2" :max="31" size="small" :step="1" 
                            id="dayEnd_0" ref="dayEnd"></el-input-number>
                            日</div>
                        <div class="line">
                            <input type="radio" name="day" v-model="day" v-bind:value="day3+'/'+day4">
                            从
                            <el-input-number class="num" v-model="day3" :value="1" :min="1" :max="31" size="small" :step="1" 
                            id="dayStart_1" ref="dayStart1"></el-input-number>
                            日开始,每
                            <el-input-number class="num" v-model="day4" :value="2" :min="1" :max="31" size="small" :step="1" 
                            id="dayEnd_1" ref="dayEnd1"></el-input-number>
                            天执行一次</div>
                        <div class="line">
                            <input type="radio" name="day" v-model="day" v-bind:value="day5+'W'">
                            每月
                            <el-input-number class="num" v-model="day5" :value="1" :min="1" :max="31" size="small" :step="1" 
                            id="dayStart_2" ref="dayStart2"></el-input-number>
                            号最近的那个工作日</div>
                        <div class="line">
                            <input type="radio" name="day" value="L" v-model="day">
                            本月最后一天</div>
                        <div class="line">
                            <input type="radio" name="day" id="day_appoint" v-model="day" v-bind:value="dayList+','">
                            指定</div>
                        <div class="imp dayList">
                            <input type="checkbox" value="1" v-model="dayList">1
                            <input type="checkbox" value="2" v-model="dayList">2
                            <input type="checkbox" value="3" v-model="dayList">3
                            <input type="checkbox" value="4" v-model="dayList">4
                            <input type="checkbox" value="5" v-model="dayList">5
                            <input type="checkbox" value="6" v-model="dayList">6
                            <input type="checkbox" value="7" v-model="dayList">7
                            <input type="checkbox" value="8" v-model="dayList">8
                            <input type="checkbox" value="9" v-model="dayList">9
                            <input type="checkbox" value="10" v-model="dayList">10
                            <input type="checkbox" value="11" v-model="dayList">11
                            <input type="checkbox" value="12" v-model="dayList">12
                            <input type="checkbox" value="13" v-model="dayList">13
                            <input type="checkbox" value="14" v-model="dayList">14
                            <input type="checkbox" value="15" v-model="dayList">15
                            <input type="checkbox" value="16" v-model="dayList">16
                        </div>
                        <div class="imp dayList">
                            <input type="checkbox" value="17" v-model="dayList">17
                            <input type="checkbox" value="18" v-model="dayList">18
                            <input type="checkbox" value="19" v-model="dayList">19
                            <input type="checkbox" value="20" v-model="dayList">20
                            <input type="checkbox" value="21" v-model="dayList">21
                            <input type="checkbox" value="22" v-model="dayList">22
                            <input type="checkbox" value="23" v-model="dayList">23
                            <input type="checkbox" value="24" v-model="dayList">24
                            <input type="checkbox" value="25" v-model="dayList">25
                            <input type="checkbox" value="26" v-model="dayList">26
                            <input type="checkbox" value="27" v-model="dayList">27
                            <input type="checkbox" value="28" v-model="dayList">28
                            <input type="checkbox" value="29" v-model="dayList">29
                            <input type="checkbox" value="30" v-model="dayList">30
                            <input type="checkbox" value="31" v-model="dayList">31
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="月">
                    <div title="月">
                        <div class="line">
                            <input type="radio" checked="checked" name="mouth" value="*" v-model="mouth">
                            月 允许的通配符[, - * /]</div>
                        <div class="line">
                            <input type="radio" name="mouth" value="?" v-model="mouth">
                            不指定</div>
                        <div class="line">
                            <input type="radio" name="mouth" v-model="mouth" v-bind:value="mouth1+'-'+mouth2">
                            周期从
                            <el-input-number class="num" v-model="mouth1" :value="1" :min="1" :max="12" size="small" :step="1" 
                            id="mouthStart_0" ref="mouthStart"></el-input-number>
                            -
                            <el-input-number class="num" v-model="mouth2" :value="2" :min="2" :max="12" size="small" :step="1" 
                            id="mouthEnd_0" ref="mouthEnd"></el-input-number>
                            月</div>
                        <div class="line">
                            <input type="radio" name="mouth" v-model="mouth" v-bind:value="mouth3+'/'+mouth4">
                            从
                            <el-input-number class="num" v-model="mouth3" :value="1" :min="1" :max="31" size="small" :step="1" 
                            id="mouthStart_1" ref="mouthStart1"></el-input-number>
                            日开始,每
                            <el-input-number class="num" v-model="mouth4" :value="1" :min="1" :max="12" size="small" :step="1" 
                            id="mouthEnd_1" ref="mouthEnd1"></el-input-number>
                            月执行一次</div>
                        <div class="line">
                            <input type="radio" name="mouth" id="mouth_appoint" v-model="mouth" v-bind:value="mouthList+','">
                            指定</div>
                        <div class="imp mouthList">
                            <input type="checkbox" value="1" v-model="mouthList">1
                            <input type="checkbox" value="2" v-model="mouthList">2
                            <input type="checkbox" value="3" v-model="mouthList">3
                            <input type="checkbox" value="4" v-model="mouthList">4
                            <input type="checkbox" value="5" v-model="mouthList">5
                            <input type="checkbox" value="6" v-model="mouthList">6
                            <input type="checkbox" value="7" v-model="mouthList">7
                            <input type="checkbox" value="8" v-model="mouthList">8
                            <input type="checkbox" value="9" v-model="mouthList">9
                            <input type="checkbox" value="10" v-model="mouthList">10
                            <input type="checkbox" value="11" v-model="mouthList">11
                            <input type="checkbox" value="12" v-model="mouthList">12
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="周">
                    <div title="周">
                        <div class="line">
                            <input type="radio" checked="checked" name="week" value="*" v-model="week">
                            周 允许的通配符[, - * / L #]</div>
                        <div class="line">
                            <input type="radio" name="week" value="?" v-model="week">
                            不指定</div>
                        <div class="line">
                            <input type="radio" name="week" v-model="week" v-bind:value="week1+'/'+week2">
                            周期 从星期<el-input-number class="num" v-model="week1" :value="1" :min="1" :max="7" size="small" :step="1" 
                            id="weekStart_0" ref="weekStart"></el-input-number>
                            -
                            <el-input-number class="num" v-model="week2" :value="2" :min="2" :max="7" size="small" :step="1" 
                            id="weekEnd_0" ref="weekEnd"></el-input-number></div>
                        <div class="line">
                            <input type="radio" name="week" v-model="week" v-bind:value="week3+'#'+week4">
                            第<el-input-number class="num" v-model="week3" :value="1" :min="1" :max="4" size="small" :step="1" 
                            id="weekStart_1" ref="weekStart1"></el-input-number>
                            周 的星期<el-input-number class="num" v-model="week4" :value="1" :min="1" :max="7" size="small" :step="1" 
                            id="weekEnd_1" ref="weekEnd1"></el-input-number></div>
                        <div class="line">
                            <input type="radio" name="week" v-model="week" v-bind:value="week5+'L'">
                            本月最后一个星期<el-input-number class="num" v-model="week5" :value="1" :min="1" :max="7" size="small" :step="1" 
                            id="weekStart_2" ref="weekStart2"></el-input-number></div>
                        <div class="line">
                            <input type="radio" name="week" id="week_appoint" v-model="week" v-bind:value="weekList+','">
                            指定</div>
                        <div class="imp weekList">
                            <input type="checkbox" value="1" v-model="weekList">1
                            <input type="checkbox" value="2" v-model="weekList">2
                            <input type="checkbox" value="3" v-model="weekList">3
                            <input type="checkbox" value="4" v-model="weekList">4
                            <input type="checkbox" value="5" v-model="weekList">5
                            <input type="checkbox" value="6" v-model="weekList">6
                            <input type="checkbox" value="7" v-model="weekList">7
                        </div>
                    </div>
                </el-tab-pane>
                <!-- <el-tab-pane label="年">
                    <div title="年">
                        <div class="line">
                            <input type="radio" checked="checked" name="year" onclick="unAppoint(this)">
                            不指定 允许的通配符[, - * /] 非必填</div>
                        <div class="line">
                            <input type="radio" name="year" onclick="everyTime(this)">
                            每年</div>
                        <div class="line">
                            <input type="radio" name="year" >周期 从
                            <el-input-number class="num" v-model="year1" :value="2017" :min="1" :max="3000" size="small" :step="1" 
                            id="yearStart_0"></el-input-number>
                            -
                            <el-input-number class="num" v-model="year2" :value="2018" :min="1" :max="3000" size="small" :step="1" 
                            id="yearEnd_0"></el-input-number></div>
                    </div>
                </el-tab-pane> -->
            </el-tabs>
            </div>
            <div  class="top">
                    <tr>表达式</tr>
                    <table style="height: 100px;">
                            <tr>
                                <td>
                                </td>
                                <td align="center">
                                    秒
                                </td>
                                <td align="center">
                                    分钟
                                </td>
                                <td align="center">
                                    小时
                                </td>
                                <td align="center">
                                    日
                                </td>
                                <td align="center">
                                    月<br />
                                </td>
                                <td align="center">
                                    星期
                                </td>
                                <!-- <td align="center">
                                    年
                                </td> -->
                            </tr>
                            <tr>
                                <td class="bds">
                                    表达式字段:
                                </td>
                                <td>
                                    <el-input type="text" name="v_second" readonly="readonly" v-model="second" v-bind:value="second"></el-input>
                                </td>
                                <td>
                                    <el-input type="text" name="v_min" readonly="readonly" v-model="min" v-bind:value="min"></el-input>
                                </td>
                                <td>
                                    <el-input type="text" name="v_hour" readonly="readonly" v-model="hour" v-bind:value="hour"></el-input>
                                </td>
                                <td>
                                    <el-input type="text" name="v_day" readonly="readonly" v-model="day" v-bind:value="day"></el-input>
                                </td>
                                <td>
                                    <el-input type="text" name="v_mouth" readonly="readonly" v-model="mouth" v-bind:value="mouth"></el-input>
                                </td>
                                <td>
                                    <el-input type="text" name="v_week" readonly="readonly" v-model="week" v-bind:value="week"></el-input>
                                </td>
                                <!-- <td>
                                    <el-input type="text" name="v_year"  readonly="readonly" ></el-input>
                                </td> -->
                            </tr>
                             <tr>
							    <td class="bds">Cron 表达式:</td>
							    <td colspan="6"> 
                                     <el-input type="text" name="cron" style="width: 100%;" id="cron" readonly="readonly" v-model="cronExpression"
                                         ></el-input>
                                          </td>
                            </tr>
                    </table>
            </div>
            <div class="center">
				   <td class="bds"><el-button type="primary" @click="submitExpression()">确定</el-button></td>
				   <td><el-button type="primary" @click="cancelExpression()">取消</el-button></td>
			</div>  
        </el-dialog>
      </div>
</template>
<script>
export default {
    name: 'addtask',
    data() {
        return {
            newtask: {
                taskid: '',
                taskname: '',
                taskRemark: '',
                taskModule: '',
                taskAction: '',
                taskParam: '',
                taskExpression: '',
                taskmoduleId: ''
            },
            taskmodules: [],
            makeTimeExpressionOpend: false,
            second1: '1',
            second2: '2',
            second3: '1',
            second4: '1',
            min1: '1',
            min2: '2',
            min3: '1',
            min4: '1',
            hour1: '1',
            hour2: '2',
            hour3: '1',
            hour4: '1',
            day1: '1',
            day2: '2',
            day3: '1',
            day4: '1',
            day5: '1',
            mouth1: '1',
            mouth2: '2',
            mouth3: '1',
            mouth4: '1',
            week1: '1',
            week2: '2',
            week3: '1',
            week4: '1',
            week5: '1',
            year1: '1',
            year2: '2',
            uuid: '',
            taskModule: '',
            gridDataSource: [],
            second: '*',
            min: '*',
            hour: '*',
            day: '*',
            mouth: '*',
            week: '?',
            list: [],
            secondList: [],
            minList: [],
            hourList: [],
            dayList: [],
            mouthList: [],
            weekList: [],
            taskExpression: '',
            rules: {
                taskname: [
                    { required: true, trigger: 'blur', message: '名称必填' },
                    { type: 'string', max: 20, trigger: 'blur', message: '名称必须小于20个字' }
                ],
                taskModule: [
                    { required: true, trigger: 'change', message: '模块必填' }
                ],
                taskAction: [
                    { required: true, trigger: 'blur', message: 'job名称必填' },
                    { type: 'string', max: 20, trigger: 'blur', message: 'job名称必须小于20个字' }
                ],
                taskParam: [
                    { required: true, trigger: 'blur', message: '作业参数必填' },
                    { type: 'string', max: 200, trigger: 'blur', message: '作业参数必须小于200个字' }
                ],
                // taskExpression: [
                //     { required: true, trigger: 'blur', message: '作业执行时间表达式必填' }
                // ],
                taskRemark: [
                    { type: 'string', max: 200, trigger: 'blur', message: '备注必须小于200个字' }
                ]
            }
        };
    },
    computed: {
        cronExpression() {
            return this.second + this.min + this.hour + this.day + this.mouth + this.week;
        }
    },
    // 页面激活
    activated() {
        let taskid = this.$route.query.id;
        console.log(this.$route.query);
        console.log(taskid);
        this.$http.get('/TaskConfig/GetTaskConfig', {
            params: {
                taskid: taskid
            }
        }).then((response) => {
            if (response.data.isSuccess) {
                this.newtask = response.data.taskConfigList[0];
                console.log(this.newtask);
                this.newtask = {
                    taskid: this.newtask.taskid,
                    taskname: this.newtask.taskname,
                    taskRemark: this.newtask.taskRemark,
                    taskModule: this.newtask.taskModule,
                    taskmoduleId: this.newtask.taskmoduleId,
                    taskAction: this.newtask.taskAction,
                    taskParam: this.newtask.taskParam,
                    taskExpression: this.newtask.taskExpression
                };
                this.taskExpression = this.newtask.taskExpression;
                console.log(this.taskExpression);
            }
        });
    },
    methods: {
        /**
   * 查询模块名
   */
        taskModuleQuery() {
            this.$http.get('/TaskConfig/GetAllTaskModuleConfig').then((response) => {
                if (response.data.isSuccess) {
                    this.taskmodules = response.data.taskModuleList;
                }
            });
        },
        /**
   * 生成随机taskid
   */
        getnewtaskid() {
            let s = [];
            let hexDigits = '0123456789abcdef';
            for (let i = 0; i < 36; i++) {
                s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
            }
            s[14] = '4';  // bits 12-15 of the time_hi_and_version field to 0010
            s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
            s[8] = s[13] = s[18] = s[23] = '-';

            let uuid = s.join('');
            console.log(uuid);
            return uuid;
        },
        /**
       * 获取模块ID
       */
        changeValue(value) {
            this.newtask.taskmoduleId = value;
            let obj = {};
            obj = this.taskmodules.find((item) => {
                return item.taskmoduleId === value;
            });
            this.newtask.taskModule = obj.taskmodule;
        },
        /**
           * 新增任务提交
           */
        addTaskSubmit() {
            if (this.newtask.taskid !== '') {
                this.newtask.taskid = this.newtask.taskid;
            } else {
                this.newtask.taskid = this.getnewtaskid();
            }
            this.$refs.taskform.validate((valid) => {
                if (valid) {
                    this.$http.post('/TaskConfig/SaveTaskConfig',
                        {
                            taskid: this.newtask.taskid,
                            taskname: this.newtask.taskname,
                            taskRemark: this.newtask.taskRemark,
                            taskModule: this.newtask.taskModule,
                            taskAction: this.newtask.taskAction,
                            taskParam: this.newtask.taskParam,
                            taskExpression: this.taskExpression,
                            taskmoduleId: this.newtask.taskmoduleId
                        }).then((response) => {
                            if (response.data.isSuccess) {
                                this.$message({
                                    message: '操作成功!',
                                    type: 'success'
                                });
                                if (response.data) {
                                    this.gridDataSource.push(response.data.newtask);
                                }
                                this.newtask = {
                                    taskid: '',
                                    taskname: '',
                                    taskRemark: '',
                                    taskModule: '',
                                    taskAction: '',
                                    taskParam: '',
                                    taskExpression: ''
                                    // taskmoduleId: ''
                                };
                                this.addTaskDislogOpened = false;
                                this.cancel();
                            } else {
                                this.$message({
                                    message: '数据提交出现错误,请稍后重试!',
                                    type: 'error'
                                });
                            }
                        }).catch(() => {
                            this.$message({
                                message: '数据提交出现错误,请稍后重试!',
                                type: 'error'
                            });
                        });
                } else {
                    return false;
                }
            });
        },
        /**
          * 点击取消返回上一界面
          */
        cancel() {
            this.$router.push({ path: '/taskmanager/task' });
        },
        /**
          * 生成时间表达式
          */
        makeTimeExpression() {
            this.makeTimeExpressionOpend = true;
        },
        /**
          * 提交表达式
          */
        submitExpression() {
            this.taskExpression = this.cronExpression;
            this.makeTimeExpressionOpend = false;
        },
        /**
          * 生成时间表达式取消
          */
        cancelExpression() {
            this.makeTimeExpressionOpend = false;
        }
    }
};
</script>
<style>
.title {
    width: 100%;
    padding: 15px;
    border: 1px solid gray;
    margin: 0px;
    background: GhostWhite;
}


.input {
    width: 200px;
}

.bds {
    width: 100px;
}

.num {

    width: 100px;
}

.textarea {
    width: 600px;
}

.top {
    margin-top: 35px;
}

.center {
    margin: auto;
    margin-top: 35px;
    width: 20%;
}
</style>
